<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Inline CSS</title>
</head>
<body>
<p style="color:red; font-size:250%">
This paragraph is written in big red letters.
</p>
<p>
This paragraph is written in normal-sized black letters.
</p>
</body>
</html>
This paragraph is written in big red letters.
This paragraph is written in normal-sized black letters.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Internal CSS</title>
<style>
p {
color: red;
font-size: 250%;
}
</style>
</head>
<body>
<p>
This paragraph is written in big red letters.
</p>
<p>
Because the styling is in the head of the HTML, it affects all paragraphs.
</p>
</body>
</html>
This paragraph is written in big red letters.
Because the styling is in the head of the HTML, it affects all paragraphs.
| In the style sheet file: |
p {
color: red;
font-size: 250%;
}
|
| In the main file: |
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
All paragaphs are affected by the external style sheet.
</p>
<p>
So both paragraphs on this page appear with these big red letters.
</p>
</body>
</html>
|
All paragaphs are affected by the external style sheet.
So both paragraphs on this page appear with these big red letters.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Classes and Ids</title>
<style>
#decide {
color: green;
font-size: 300%;
}
.magenta{
color: magenta;
}
</style>
</head>
<body>
<p id="decide">
This paragraph shows big green letters.
</p>
<p class="magenta">
This one shows regular sized magenta letters.
</p>
<p class="magenta">
And this one follows the one above.
</p>
</body>
</html>
This paragraph shows big green letters.
This one shows regular sized magenta letters.
And this one follows the one above.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Div and Span</title>
<style>
.bluebox{
background-color: lightblue;
height: 100px;
width:auto;
}
.yellowbox{
background-color: yellow;
height: 100px;
width: auto;
}
.greenbox{
background-color: green;
color: white;
height: 100px;
width: auto;
}
.tool{
background-color: magenta;
}
</style>
</head>
<body>
<div class="bluebox">
<p>
App Designer is a <span class="tool">tool</span> we use to develop app engines.
</p>
</div>
<div class="yellowbox">
<p>
Concordia implemented PeopleSoft in 2015.
</p>
</div>
<div class="greenbox">
<p>
SQL Developer allows us to query the database.
</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Padding the boxes</title>
<style>
.bluebox{
background-color: lightblue;
height: auto;
width:auto;
padding: 16px;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
padding: 10px 5px 7px 3em;
}
.greenbox{
background-color: green;
height: auto;
width: auto;
padding: 40px 10px;
color: white;
}
p{
margin: 0;
}
</style>
</head>
<body>
<div class="bluebox">
<p>
App Designer is a tool we use to develop app engines.
</p>
</div>
<div class="yellowbox">
<p>
Concordia implemented PeopleSoft in 2015.
</p>
</div>
<div class="greenbox">
<p>
SQL Developer allows us to query the database.
</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Applying borders to the boxes</title>
<style>
.bluebox{
background-color: lightblue;
height: 70px;
width: 300px;
padding: 16px;
border: 10px magenta ridge;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
padding: 10px 5px 7px 3em;
border-width: 10px 15px 5px 10px;
border-color: black green orange yellow;
border-style: ridge;
}
.greenbox{
background-color: green;
height: 100px;
width: 200px;
padding: 40px 10px;
color: white;
border-width: 10px;
border-style: groove;
border-color: brown;
border-radius:80px;
}
p{
margin: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="bluebox">
<p>
App Designer is a tool we use to develop app engines.
</p>
</div>
<div class="yellowbox">
<p>
Concordia implemented PeopleSoft in 2015.
</p>
</div>
<div class="greenbox">
<p>
SQL Developer allows us to query the database.
</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Applying margins to the boxes</title>
<style>
.bluebox{
background-color: lightblue;
height: 70px;
width: 300px;
padding: 16px;
border: 10px magenta ridge;
margin: 20px;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
padding: 10px 5px 7px 3em;
border-width: 10px 15px 5px 10px;
border-color: black green orange yellow;
border-style: ridge;
margin: 60px 10px 22px 20px;
}
.greenbox{
background-color: green;
height: 100px;
width: 200px;
padding: 40px 10px;
color: white;
border-width: 10px;
border-style: groove;
border-color: brown;
border-radius:200px;
margin: 60px 10px;
}
p{
margin: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="bluebox">
<p>
App Designer is a tool we use to develop app engines.
</p>
</div>
<div class="yellowbox">
<p>
Concordia implemented PeopleSoft in 2015.
</p>
</div>
<div class="greenbox">
<p>
SQL Developer allows us to query the database.
</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Applying backgrounds to boxes</title>
<style>
.bluebox{
color: pink;
background-image: url(Littleduck.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-origin: content-box;
height: 200px;
width: 500px;
padding: 16px;
border: 10px magenta ridge;
margin: 20px;
}
.yellowbox{
color: white;
background-image: url(Littleduck.jpg);
background-repeat: no-repeat;
height: auto;
width: 700px;
padding: 10px 5px 7px 3em;
border-width: 10px 15px 5px 10px;
border-color: black green orange yellow;
border-style: ridge;
margin: 60px 10px 22px 20px;
}
.greenbox{
background-image: url(Littleduck.jpg);
background-size: 250px 250px;
background-repeat: no-repeat;
background-origin: border-box;
height: 200px;
width: 200px;
padding: 40px 10px;
color: white;
border-width: 10px;
border-style: groove;
border-color: brown;
border-radius:200px;
margin: 60px 10px;
}
p{
margin: 0;
font-size: 2em;
}
</style>
</head>
<body>
<div class="bluebox">
<p>
App Designer is a tool we use to develop app engines.
</p>
</div>
<div class="yellowbox">
<p>If you can keep your head when all about you</p>
<p> Are losing theirs and blaming it on you;</p>
<p>If you can trust yourself when all men doubt you,</p>
<p> But make allowance for their doubting too:</p>
<p>If you can wait and not be tired by waiting,</p>
<p> Or, being lied about, don't deal in lies,</p>
<p>Or being hated don't give way to hating,</p>
<p> And yet don't look too good, nor talk too wise;</p>
</div>
<div class="greenbox">
<p>
SQL Developer allows us to query the database.
</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
If you can keep your head when all about you
Are losing theirs and blaming it on you;
If you can trust yourself when all men doubt you,
But make allowance for their doubting too:
If you can wait and not be tired by waiting,
Or, being lied about, don't deal in lies,
Or being hated don't give way to hating,
And yet don't look too good, nor talk too wise;
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Floating boxes</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: 100px;
width:auto;
float: left;
}
.yellowbox{
background-color: yellow;
height: 100px;
width: auto;
float: right;
}
.greenbox{
background-color: green;
color: pink;
height: 100px;
width: auto;
clear: both;
}
</style>
</head>
<body>
<div class="bluebox">
<p>App Designer is a tool we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p>Concordia implemented PeopleSoft in 2015.</p>
</div>
<div class="greenbox">
<p>SQL Developer allows us to query the database.</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Positioning</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: 100px;
width:auto;
position: fixed;
top: 22px;
left: 22px;
}
.yellowbox{
background-color: yellow;
height: 100px;
width: auto;
position: relative;
top: 70px;
left: 50px;
}
.greenbox{
background-color: lightgreen;
height: 100px;
width: auto;
position: absolute;
top: 160px;
left: 120px;
}
p{
font-size:2em;
}
</style>
</head>
<body>
<div class="bluebox">
<p>App Designer is a tool we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p>Concordia implemented PeopleSoft in 2015.</p>
</div>
<div class="greenbox">
<p>SQL Developer allows us to query the database.</p>
</div>
</body>
</html>
It's not possible to replicate the behaviour of the code on the left here inside this cell,
so I had to use an iframe for that. Use the scroll bars to see what happens.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Text decoration</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: 100px;
width:auto;
text-decoration: underline;
font-weight: bold;
}
.yellowbox{
background-color: yellow;
height: 100px;
width: auto;
text-decoration: overline;
font-style: italic;
font-size: 1.5em;
}
.greenbox{
background-color: green;
height: 100px;
width: auto;
letter-spacing: 10px;
text-shadow: 3px 3px #abcdef;
text-indent: 40px;
}
</style>
</head>
<body>
<div class="bluebox">
<p>App Designer is a tool we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p>Concordia implemented PeopleSoft in 2015.</p>
</div>
<div class="greenbox">
<p>SQL Developer allows us to query the database.</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Text font and alignment</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
font-size: 20px;
font-family: sans-serif;
text-align: right;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
text-align: center;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
font-size: 20px;
font-family: monospace;
text-align: left;
}
</style>
</head>
<body>
<div class="bluebox">
<p>App Designer is a tool we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p>Concordia implemented PeopleSoft in 2015.</p>
</div>
<div class="greenbox">
<p>SQL Developer allows us to query the database.</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Image sprites</title>
<style>
#test_image{
width: 900px;
height: 600px;
background: url(Littleduck.jpg) -110px -90px;
}
</style>
</head>
<body>
<img id="test_image">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Styling the links</title>
<style>
a:link{
color: red;
}
a:hover{
font-size: 1.3em;
color: pink;
}
.bluebox{
background-color: lightblue;
color: white;
height: 100px;
width:800px;
}
div.bluebox a:active {
font-size: 2em;
}
.yellowbox{
background-color: yellow;
height: 100px;
width: 900px;
}
div.yellowbox a:visited{
color: black;
font-size: 1.5em;
}
.greenbox{
background-color: green;
height: 100px;
width: 1000px;
}
p{
font-size:2em;
}
</style>
</head>
<body>
<div class="bluebox">
<p>App Designer is a <a href="https://en.wikipedia.org/wiki/PeopleTools#Application_Designer">tool</a> we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p>Concordia implemented <a href = "https://en.wikipedia.org/wiki/PeopleSoft">PeopleSoft</a> in 2015.</p>
</div>
<div class="greenbox">
<p><a href = "https://en.wikipedia.org/wiki/Oracle_SQL_Developer">SQL Developer</a> allows us to query the database.</p>
</div>
</body>
</html>
It's not possible to replicate the behaviour of the code on the left here inside this cell,
so I had to use an iframe for that. Hover over the links to see what happens.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Gradients</title>
<style>
.bluebox{
background-image: conic-gradient(red, yellow, green);
height: 300px;
width: 300px;
border-radius: 30%;
}
.yellowbox{
background-image: linear-gradient(red, green);
height: 300px;
width: 300px;
border-radius: 40%;
}
.greenbox{
background-image: radial-gradient(red, yellow, magenta, green);
height: 300px;
width: 300px;
border-radius: 50%;
p{
font-size:1.5em;
}
</style>
</head>
<body>
<div class="bluebox">
<p style="padding:100px 20px;">App Designer is a tool we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p style="color:white; padding:120px 20px;">Concordia implemented PeopleSoft in 2015.</p>
</div>
<div class="greenbox">
<p style="padding:120px 20px;">SQL Developer allows us to query the database.</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Transformations</title>
<style>
.bluebox{
background-color: lightblue;
height: 200px;
width: 200px;
transform: rotate(45deg);
margin:30px;
}
.yellowbox{
background-color: yellow;
height: 200px;
width: 200px;
transform: scale(0.3,1);
margin:30px;
}
.greenbox{
background-color: lightgreen;
height: 200px;
width: 200px;
transform: skew(20deg, 30deg);
margin:30px;
}
p{
font-size:1.5em;
}
</style>
</head>
<body>
<div class="bluebox">
<p>App Designer is a tool we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p>Concordia implemented PeopleSoft in 2015.</p>
</div>
<div class="greenbox">
<p>SQL Developer allows us to query the database.</p>
</div>
</body>
</html>
App Designer is a tool we use to develop app engines.
Concordia implemented PeopleSoft in 2015.
SQL Developer allows us to query the database.
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Transitions</title>
<style>
.bluebox{
background-color: lightblue;
height: 200px;
width: 200px;
transition: width 2s, height 2s, transform 2s;
}
.bluebox:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
.yellowbox{
background-color: yellow;
height: 200px;
width: 200px;
transition: width 3s, transform 4s;
}
.yellowbox:hover {
width: 400px;
}
.greenbox{
background-color: lightgreen;
height: 200px;
width: 200px;
transition: height 3s, transform 2s;
}
.greenbox:hover {
height: 500px;
}
p{
font-size:1.5em;
}
</style>
</head>
<body>
<div class="bluebox">
<p>App Designer is a tool we use to develop app engines.</p>
</div>
<div class="yellowbox">
<p>Concordia implemented PeopleSoft in 2015.</p>
</div>
<div class="greenbox">
<p>SQL Developer allows us to query the database.</p>
</div>
</body>
</html>
It's not possible to replicate the behaviour of the code on the left here inside this cell,
so I had to use an iframe for that. Hover over the boxes to see what happens.